<template>
  <!--公告通知-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="wrapper">
      <Row :gutter="16">
        <i-col span="6">
          <ngn :data="data" :activeIndex="activeIndex"></ngn>
        </i-col>
        <i-col span="18">
          <div class="com">
            <p class="p">
              <Icon type="ios-pin"/>
              <span>您现在的位置是:</span><span class="span">{{data.title}}</span><span> > </span><span
              class="span">公告通知</span>
            </p>
          </div>
          <Spin size="large" v-if="spinShow">加载中...</Spin>
          <div class="text01" v-else>
            <h2>
              <p>{{content.title}}</p>
            </h2>
            <p>时间：{{content.createTimeFormate}}</p>
            <hr>
            <div class="textDetails">
              <p v-html="content1.newsContent"></p>
            </div>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import ngn from '../module/ngn'

  export default {
    components: {
      carousel, ngn
    },
    data() {
      return {
        activeIndex: 3,
        autoplaySpeed: 100000,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        data: {
          title: '资讯中心',
          list: [
            {list: '期刊资讯', link: 'JournalofInformation',},
            {list: '工作动态', link: 'workTrend',},
            {list: '行业动态', link: 'industryDynamic'},
            {list: '公告通知', link: 'announcementNotice'},
            {list: '投稿攻略', link: 'SubmissionStrategy'},
          ],
        },
        id: '',
        content: '',
        content1: '',
        spinShow: false,
      }
    },
    created() {
      this.id = this.$route.query.id
    },
    mounted() {
      this.dataArray();
    },
    methods: {
      dataArray() {
        this.spinShow = true;
        this.$axios.get(this.$api.url + '/news/new/' + this.id).then((res) => {
          if (res.data.data) {
            setTimeout(() => {
              this.spinShow = false;
              this.content = res.data.data;
              this.content1 = res.data.data.newsDetail;
            }, 300);
          }
        });
      }
    }
  }
</script>

<style scoped>
  .com .p {
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #000;
  }

  .span {
    padding: 0 10px;
  }

  .text01 > h2 {
    font-style: normal;
    color: #6699CC;
    text-align: center;
    font-size: 24px;
    padding-top: 20px;
  }

  .text01 > p {
    text-align: center;
    font-size: 16px;
    color: #999999;
    padding: 10px 0;
  }

  .textDetails {
    padding: 10px 0 20px 0;
  }

  .textDetails > p {
    padding: 10px 0;
    font-size: 16px;
    text-align: left;
    color: #000;
  }

  .ivu-spin {
    font-size: 40px;
  }
</style>
